<template>
  <div id="myChart" :style="{width: '1500px', height: '500px'}"></div>
</template>
<script>
  import {
    ListHots
  } from "@/api/film";
  export default {
    name: 'show',
    data() {
      return {
        total: []
      }
    },
    mounted() {
      //获取热门电影      
      ListHots().then(res => {
        this.total = res.data
        this.drawLine()
      })

    },
    methods: {
      drawLine() {
        let hotlist = this.total.map((item) => item.hot)
        let movielist = this.total.map(item => {
          item = item.actors
          item = item.split("/")[0]
          return item
        })

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          legend: {
            top: 'bottom'
          },
          title: {
            text: '十佳演员'
          },
          toolbox: {
            show: true,
            feature: {

            }
          },
          series: [{
            name: '面积模式',
            type: 'pie',
            // radius: [50, 250],
            // center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 10
            },
            data: [{
                value: hotlist[0],
                name: movielist[0]
              },
              {
                value: hotlist[1],
                name: movielist[1]
              },
              {
                value: hotlist[2],
                name: movielist[2]
              },
              {
                value: hotlist[3],
                name: movielist[3]
              },
              {
                value: hotlist[4],
                name: movielist[4]
              },
              {
                value: hotlist[5],
                name: movielist[5]
              },
              {
                value: hotlist[6],
                name: movielist[6]
              },
              {
                value: hotlist[7],
                name: movielist[7]
              },
              {
                value: hotlist[8],
                name: movielist[8]
              },
              {
                value: hotlist[9],
                name: movielist[9]
              },

            ]
          }]
        });
      }
    }
  }
</script>


<style scoped>
  #myChart {
    margin-top: 100px;
  }
</style>